<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery宽屏焦点图片动画轮播代码 - 16素材网</title>

<link rel="stylesheet" type="text/css" href="css/main.css" id="main-css">

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/rev-setting-1.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

</head>
<body>

<div class="fullwidthbanner-container">
		<div id="revolution-slider">
			<ul>
				 <li data-transition="fade" data-slotamount="10" data-masterspeed="300" data-thumb="images-slider/thumbs/thumb1.jpg">
					<!--  BACKGROUND IMAGE -->
					<img src="images-slider/wide3.jpg" alt="" />

					<!-- THE CAPTIONS IN THIS SLIDE -->
					<div class="tp-caption sfl"
						data-x="-130"
						data-y="150"
						data-speed="300"
						data-start="300"
						data-easing="easeOutBack">
						<img src="images-slider/rb.png" alt="">
					</div>

					<div class="tp-caption med-white lfl"
						data-x="0"
						data-y="145"
						data-speed="300"
						data-start="800"
						data-easing="easeOutExpo">
						Inspira designed for
					</div>

					<div class="caption sfb very-big-white"
						data-x="0"
						data-y="190"
						data-speed="300"
						data-start="1200"
						data-easing="easeOutExpo">
						winner
					</div>


					<div class="tp-caption small-white lfr"
						data-x="0"
						data-y="255"
						data-speed="300"
						data-start="1600"
						data-easing="easeOutExpo">
						<a href="#" class="btn btn-large btn-primary">Purchase Now</a>
					</div>


					<div class="tp-caption lfb"
						data-x="390"
						data-y="40"
						data-speed="1000"
						data-start="2000"
						data-easing="easeOutExpo"
						data-endeasing="fade"
						>
						<img src="images-slider/guy-shadow.png" alt="">
					</div>

					<div class="tp-caption small-white lft"
						data-x="240"
						data-y="0"
						data-speed="2000"
						data-start="2600"
						data-easing="easeOutExpo">
						<img src="images-slider/spotlight.png" alt="">
					</div>

					<div class="tp-caption fade"
						data-x="390"
						data-y="40"
						data-speed="2000"
						data-start="2600"
						data-easing="easeOutExpo">
						<img src="images-slider/guy.png" alt="">
					</div>
				</li>
				
				<!-- THE FIRST SLIDE -->
				<li data-transition="fade" data-slotamount="10" data-masterspeed="300" data-thumb="images-slider/thumbs/thumb1.jpg">
					<!--  BACKGROUND IMAGE -->
					<img src="images-slider/wide1.jpg" alt="" />

					<!-- THE CAPTIONS IN THIS SLIDE -->
					<div class="caption large_text sfb"
						data-x="300"
						data-y="207"
						data-speed="300"
						data-start="800"
						data-easing="easeOutExpo">
						<img src="images-slider/our-features.png" alt="">
					</div>

					<div class="tp-caption sfr"
						data-x="220"
						data-y="115"
						data-speed="300"
						data-start="1000"
						data-easing="easeOutBack">
						<img src="images-slider/lu.png" alt="">
					</div>

					<div class="tp-caption sfr"
						data-x="110"
						data-y="85"
						data-speed="300"
						data-start="1200"
						data-easing="easeOutBack">
						<img src="images-slider/clean.png" alt="">
					</div>

					<div class="tp-caption sfr"
						data-x="180"
						data-y="217"
						data-speed="300"
						data-start="1400"
						data-easing="easeOutBack">
						<img src="images-slider/lm.png" alt="">
					</div>

					<div class="tp-caption sfr"
						data-x="0"
						data-y="217"
						data-speed="300"
						data-start="1600"
						data-easing="easeOutBack">
						<img src="images-slider/responsive.png" alt="">
					</div>

					<div class="tp-caption sfr"
						data-x="220"
						data-y="285"
						data-speed="300"
						data-start="1800"
						data-easing="easeOutBack">
						<img src="images-slider/lb.png" alt="">
					</div>

					<div class="tp-caption sfr"
						data-x="40"
						data-y="345"
						data-speed="300"
						data-start="2000"
						data-easing="easeOutBack">
						<img src="images-slider/bootstrap.png" alt="">
					</div>

					<div class="tp-caption sfl"
						data-x="625"
						data-y="115"
						data-speed="300"
						data-start="2200"
						data-easing="easeOutBack">
						<img src="images-slider/ru.png" alt="">
					</div>

					<div class="tp-caption sfl"
						data-x="730"
						data-y="85"
						data-speed="300"
						data-start="2400"
						data-easing="easeOutBack">
						<img src="images-slider/solid.png" alt="">
					</div>

					<div class="tp-caption sfl"
						data-x="650"
						data-y="217"
						data-speed="300"
						data-start="2600"
						data-easing="easeOutBack">
						<img src="images-slider/rm.png" alt="">
					</div>

					<div class="tp-caption sfl"
						data-x="770"
						data-y="217"
						data-speed="300"
						data-start="2800"
						data-easing="easeOutBack">
						<img src="images-slider/lightweight.png" alt="">
					</div>

					<div class="tp-caption sfl"
						data-x="625"
						data-y="285"
						data-speed="300"
						data-start="3000"
						data-easing="easeOutBack">
						<img src="images-slider/rb.png" alt="">
					</div>

					<div class="tp-caption sfl"
						data-x="730"
						data-y="345"
						data-speed="300"
						data-start="3200"
						data-easing="easeOutBack">
						<img src="images-slider/fresh.png" alt="">
					</div>
				</li>

				<li data-transition="fade" data-slotamount="10" data-masterspeed="300" data-thumb="images-slider/thumbs/thumb1.jpg">
					<!--  BACKGROUND IMAGE -->
					<img src="images-slider/wide2.jpg" alt="" />

					<!-- THE CAPTIONS IN THIS SLIDE -->
					<div class="tp-caption sfl"
						data-x="-130"
						data-y="100"
						data-speed="300"
						data-start="300"
						data-easing="easeOutBack">
						<img src="images-slider/rb.png" alt="">
					</div>

					<div class="caption sfb"
						data-x="0"
						data-y="130"
						data-speed="300"
						data-start="800"
						data-easing="easeOutExpo">
						<img src="images-slider/inspira.png" alt="">
					</div>

					<div class="tp-caption med-white sfl"
						data-x="0"
						data-y="220"
						data-speed="300"
						data-start="1000"
						data-easing="easeOutExpo">
						Most Complete Template Ever
					</div>

					<div class="tp-caption small-white sfr"
						data-x="0"
						data-y="260"
						data-speed="300"
						data-start="1200"
						data-easing="easeOutExpo">
						<a href="#" class="btn btn-large btn-primary">Purchase Now</a>
					</div>

					<div class="tp-caption small-white lfb"
						data-x="300"
						data-y="40"
						data-speed="1000"
						data-start="1400"
						data-easing="easeOutExpo">
						<img src="images-slider/slider-10.png" alt="" />
					</div>
				</li>
			   
			</ul>
		</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.16sucai.com/" target="_blank">16素材网</a></p>
</div>
</body>
</html>